<template>
  <div>
    <h3>vue</h3>
  </div>
</template>

<script>
// toRaw 转换为原始对象
// markRaw 让对象不对变成响应式
// isReactive 判断它是否为reactive对象
import { toRaw, reactive, markRaw, isReactive } from 'vue'

export default {
  setup() {
    // const foo = { id: 1 }
    // const state = reactive(foo)
    // // true
    // console.log(toRaw(state) == foo)
    // console.log(toRaw(state))

    // foo对象它不能被转为响应式
    const foo = markRaw({ id: 1 })
    const state = reactive(foo)
    // false
    console.log(isReactive(state))

    return {}
  }
}
</script>

<style lang="scss"></style>
